
<section class="listSection">
  <div class="listNav">
    环境服务机构管理 >  环境服务机构设备管理
  </div>

  <section class="content selectContent">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>信息查询</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 listSectionSelect" >
        <form class="form-inline" #searchForm="ngForm" (ngSubmit)="doSearch(searchForm.value, 'submit')">
          <div class="row">
            <div class="form-group search-list">
              <label>设备名称：</label>
              <input type="text" class="form-control" name="name" mdInput [(ngModel)]="name" placeholder="请输入名称" >
            </div>
            <div class="form-group search-list">
            <label>设备制造企业：</label>
            <select class="form-control selectStyle " [(ngModel)]="manufactorId" name="manufactorId">
              <option *ngFor="let equips of equiplist" [value]="equips.id">{{equips.manufacturingName}}</option>
            </select>
          </div>
            <div class="form-group search-list">
              <label>设备型号：</label>
              <input type="text" class="form-control" name="model" mdInput [(ngModel)]="model" placeholder="请输入" >
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA search-btn"  type="submit">查询</button>

            </div>
          </div>
          <div class="row">
            <div class="form-group search-list">
              <label>设备一级分类：</label>
              <select class="form-control selectStyle " [(ngModel)]="firstType" name="firstType" (click) ="getSlectedId(firstType)" >
                <option [value]="'003'">废水自动监控设施</option>
                <option [value]="'004'">废气自动监控设施</option>
                <option [value]="'005'">数据采集仪器</option>
              </select>
            </div>
            <div class="form-group search-list">
              <label>设备二级分类：</label>
             <select class="form-control selectStyle" name="secondType" [(ngModel)]="lookInfo.secondCode" >
                <option *ngFor="let types of ertypelist" [value]="types.secondCode">{{types.secondName}}</option>
              </select>
            </div>
            <div class="form-group search-list">
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA reset-btn" md-raised-button type="button" (click)="searchForm.resetForm({})">清除</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>


  <section class="content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>基本信息</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
        <form action="" >
          <div class="box-body">
            <div class="add-box clearfix">
              <button  class="btn add-tit" data-toggle="modal" data-target="#addModal">新增</button>
            </div>
            <table border="1" cellspacing="0"  class="table text-center listTable">
              <tr class="header-tab">
                <th>设备名称</th>
                <th>设备型号</th>
                <th>设备制造企业</th>
                <th>设备版本号</th>
                <th>操作</th>
              </tr>
              <tr *ngFor="let list of dataList">
                <td>{{list.name}}</td>
                <td>{{list.model}}</td>
                <td>{{list.manufacturingName}}</td>
                <td>{{list.versionNumber}}</td>
                <td>
                  <span>
                   <img src="assets/icon/see.png" class="list-icon">
                      <a href="#" data-toggle="modal" data-target="#myModal" (click)="userMessage(list)">查看</a>

                  </span>
                  <span>
                    <img src="assets/icon/edit.png" class="list-icon">
                      <a href="#" data-toggle="modal" data-target="#updateModal" (click)="userMessage(list)">编辑</a>
                  </span>
                  <span>
                    <img src="assets/icon/delete.png" class="list-icon">
                      <a href="#" data-toggle="modal" data-target="#deleteModal" (click)="delete(list.id)">删除</a>
                  </span>
                  <span *ngIf="list.firstType !='005'">
                   <img src="assets/icon/equipCode.png" class="list-icon">
                       <a [routerLink]="['../eliminator']" [queryParams]="{'equipmentId':list.id,'firstCode':list.firstType}">因子</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <app-pagination
            [totalItems]="pageInfo.totalItems"
            [currentPage]="pageInfo.currentPage"
            [pageSize]="pageInfo.pageSize"
            (onReGetPage)="setPage($event)">
          </app-pagination>

        </form>
      </div>
    </div>
  </section>

  <!-- 详情 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">查看详情</h4>
          </div>
        </div>
        <div class="modal-body">

          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td>制造商：</td>
                  <td>{{lookInfo.manufacturingName}}</td>
                </tr>
                <tr>
                  <td>设备名称：</td>
                  <td>{{lookInfo.name }}</td>
                </tr>
                <tr>
                  <td>设备一级分类：</td>
                  <td>{{lookInfo.firstType | equipPipe }}</td>
                </tr>
                <tr>
                  <td>设备二级分类：</td>
                  <td>{{lookInfo.typeName}}</td>
                </tr>
                <tr>
                  <td>设备型号：</td>
                  <td>{{lookInfo.model }}</td>
                </tr>
                <tr>
                  <td>设备版本号：</td>
                  <td>{{lookInfo.versionNumber  }}</td>
                </tr>
                <tr>
                  <td>测量上限：</td>
                  <td>{{lookInfo.measureLimit }}</td>
                </tr>
                <tr>
                  <td>测量下限：</td>
                  <td>{{lookInfo.measureLower  }}</td>
                </tr>
                <tr>
                  <td>量程上限：</td>
                  <td>{{lookInfo.rangeLimit}}</td>
                </tr>
                <tr>
                  <td>量程下限：</td>
                  <td>{{lookInfo.rangeLower }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn selectButtonOfA close-btn" role="button" data-dismiss="modal">返回</button>
        </div>
      </div>
    </div>
  </div>

  <!--添加-->
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" data-target=".bs-example-modal-lg">
    <div class="modal-dialog" role="document">
      <form #addFrom="ngForm" (ngSubmit)="doAdd(addFrom.value,addFrom.valid)" novalidate>
        <div class="modal-content">
          <div class="modal-header text-center" >
            <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="addModalLabel">新增</h4>
            </div>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-10 col-md-offset-1">

                <table class="table detailsTable">
                  <tr>
                    <td>制造商：</td>
                    <td><select class="form-control selectStyle clear-input" style="width:70%" name="manufactorId" ngModel>
                      <option *ngFor="let equips of equiplist" [value]="equips.id">{{equips.manufacturingName}}</option>
                    </select></td>
                  </tr>
                  <tr>
                    <td><span class="red">*</span>设备名称：</td>
                    <td><input type="text" class="form-control"  placeholder="请输入" name="name" [(ngModel)]="addname" required ></td>
                    <td class="prompt-box"><div [hidden]="!addFrom.form.hasError('required','name')" class="prompt"></div></td>
                  </tr>
                  <tr>
                    <td>设备一级分类：</td>
                    <td><select class="form-control selectStyle  clear-input" style="width:70%" name="firstType" [(ngModel)]="firstType1" (click)="getSlectedId(firstType1)">
                      <option [value]="'003'">废水自动监控设施</option>
                      <option [value]="'004'">废气自动监控设施</option>
                      <option [value]="'005'">数据采集仪器</option>
                    </select></td>
                  </tr>
                  <tr>
                    <td>设备二级分类：</td>
                    <td><select class="form-control selectStyle  clear-input" style="width:70%" name="secondType" [(ngModel)]="lookInfo.secondCode">
                      <option *ngFor="let types of ertypelist" [value]="types.secondCode">{{types.secondName}}</option>
                    </select></td>
                  </tr>
                  <tr>
                    <td>设备型号：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="model" ngModel ></td>
                  </tr>
                  <tr>
                    <td>设备版本号：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="versionNumber" ngModel ></td>
                  </tr>
                  <tr>
                    <td>测量上限：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="measureLimit" ngModel></td>
                  </tr>
                  <tr>
                    <td>测量下限：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="measureLower" ngModel></td>
                  </tr>
                  <tr>
                    <td>量程上限：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="rangeLimit" ngModel></td>
                  </tr>
                  <tr>
                    <td>量程下限：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="rangeLower" ngModel></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="modal-footer text-center">
            <button class="btn selectButtonOfA sumbit-btn" type="submit" [disabled]="!addFrom.form.valid">提交</button>
            <button class="btn selectButtonOfA close-btn" role="button" data-dismiss="modal">返回</button>

          </div>
        </div>
      </form>
    </div>
  </div>

  <!--编辑-->
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
      <form #editFrom="ngForm" (ngSubmit)="doEdit(editFrom.value,editFrom.valid)"  novalidate>
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="updateModalLabel">编辑</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td>制造商：</td>
                  <td><select class="form-control selectStyle " style="width:70%" name="manufactorId" [(ngModel)]="lookInfo.manufactorId">
                    <option *ngFor="let equips of equiplist" [value]="equips.id"[selected]="equips.id==lookInfo.manufactorId">{{equips.manufacturingName}}</option>
                  </select>
                    <input type="hidden" class="form-control" name="id" [(ngModel)]="lookInfo.id">
                  </td>
                </tr>
                <tr>
                  <td><span class="red">*</span>设备名称：</td>
                  <td><input type="text" class="form-control" name="name" [(ngModel)]="lookInfo.name" required></td>
                  <td class="prompt-box"><div [hidden]="!editFrom.form.hasError('required','name')" class="prompt"></div></td>
                </tr>
                <tr>
                  <td>设备一级分类：</td>
                  <td><select class="form-control selectStyle " style="width:70%" name="firstType" [(ngModel)]="lookInfo.firstType" (click)="getSlectedId(lookInfo.firstType )">
                    <option [value]="'003'">废水自动监控设施</option>
                    <option [value]="'004'">废气自动监控设施</option>
                    <option [value]="'005'">数据采集仪器</option>
                  </select></td>
                </tr>
                <tr>
                  <td>设备二级分类：</td>
                  <td><select class="form-control selectStyle " style="width:70%" name="secondType" [(ngModel)]="lookInfo.secondType">
                    <option *ngFor="let types of ertypelist" [value]="types.secondCode" [selected]="types.secondCode==lookInfo.secondType">{{types.secondName}}</option>
                  </select></td>
                </tr>
                <tr>
                  <td>设备型号：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="model" [(ngModel)]="lookInfo.model"></td>
                </tr>
                <tr>
                  <td>设备版本号：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="versionNumber" [(ngModel)]="lookInfo.versionNumber"></td>
                </tr>
                <tr>
                  <td>测量上限：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="measureLimit" [(ngModel)]="lookInfo.measureLimit"></td>
                </tr>
                <tr>
                  <td>测量下限：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="measureLower" [(ngModel)]="lookInfo.measureLower"></td>
                </tr>
                <tr>
                  <td>量程上限：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="rangeLimit" [(ngModel)]="lookInfo.rangeLimit"></td>
                </tr>
                <tr>
                  <td>量程下限：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="rangeLower" [(ngModel)]="lookInfo.rangeLower"></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button class="btn selectButtonOfA sumbit-btn" type="submit" [disabled]="!editFrom.form.valid">提交</button>
          <button class="btn selectButtonOfA close-btn" role="button" data-dismiss="modal">返回</button>

        </div>
      </div>
      </form>
    </div>
  </div>

  <!--删除-->
  <div class="modal fade deleteModal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" [class.remove]="isRemove">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <img src="assets/img/warn-doat.png" alt="warn">
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>您将删除这条记录</span>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button class="btn selectButtonOfA reset-btn"  role="button" (click)="deletePollut(deleteId)" data-dismiss="modal">删除</button>
          <button class="btn selectButtonOfA close-btn"  role="button" data-dismiss="modal">取消</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade deleteModal" id="error" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="errorMessage">错误信息</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>{{errorMessage}}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer2 text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn"  data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


